<template>
  <el-row :gutter="40" style="margin:0px;">
    <el-col :lg="20">
      <el-form
        :inline="true"
        :model="queryParams"
        label-position="right"
        size="small"
        class="filter-form-inline"
      >
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="6">
            <el-form-item label="客户类型" style="width: 100%">
              <el-select
                v-model="queryParams.creditType"
                style="width: 100%"
                placeholder="客户类型"
                @change="handlChange"
              >
                <!--                    <el-option label="代理商" value="agent"/>-->
                <!--                    <el-option label="兼职" value="agent_person"/>-->
                <el-option label="配送商" value="distribute" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" style="width: 100%">
              <el-input v-model="queryParams.customerName" clearable placeholder="客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称" style="width: 100%">
              <el-input v-model="queryParams.productName" clearable placeholder="产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置</el-button>
              <el-button type="primary" class="main-btn" @click="handlSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :lg="4">
      <table-tools>
        <template #btn>
          <div style="display: flex; justify-content: flex-end">
            <table-cell-setting :table-option="tableOption" :checked="checkListData" @checkList="checkList" />
          </div>
        </template>
      </table-tools>
    </el-col>
  </el-row>

  <table-view
    header-cell-class-name="table-header"
    :data="tableData"
    border
    :cell-style="cellStyle"
    @row-click="aloneClick"
    @sort-change="handlSort"
  >
    <el-table-column
      v-if="checkListData.indexOf('qudao') !== -1"
      label="渠道客户名称"
      header-align="center"
      :show-overflow-tooltip="true"
      prop="index"
      :min-width="160"
      fixed
    >
      <template #default="{row}">
        <span v-if="queryParams.creditType === 'agent'">{{ row.agentDetail?.agentName }}</span>
        <span v-if="queryParams.creditType === 'agent_person'" />
        <span v-if="queryParams.creditType === 'distribute'">{{ row.distributeInfoDetail?.distributeName }}</span>
      </template>
    </el-table-column>

    <el-table-column
      v-if="checkListData.indexOf('kehu') !== -1"
      label="客户类型"
      fixed
      align="center"
      width="140"
    >
      <span v-if="queryParams.creditType === 'agent'">代理商</span>
      <span v-if="queryParams.creditType === 'agent_person'">兼职</span>
      <span v-if="queryParams.creditType === 'distribute'">配送商</span>
    </el-table-column>

    <el-table-column
      v-if="checkListData.indexOf('productPopularName') !== -1"
      label="产品名称"
      :min-width="160"
      header-align="center"
      :show-overflow-tooltip="true"
      prop="productInfoDetail.productPopularName"
    />

    <el-table-column
      v-if="checkListData.indexOf('approvalNumber') !== -1"
      label="批准文号"
      :min-width="160"
      header-align="center"
      :show-overflow-tooltip="true"
      prop="productInfoDetail.approvalNumber"
    />

    <el-table-column
      v-if="checkListData.indexOf('packSpecs') !== -1"
      label="包装规格"
      :min-width="140"
      prop="productInfoDetail.packSpecs"
      align="center"
    />

    <el-table-column
      v-if="checkListData.indexOf('stock') !== -1"
      label="上月结余库存"
      :min-width="140"
      prop="stock"
      align="center"
    />

    <el-table-column
      v-if="checkListData.indexOf('thisMonthDeliveryAmount') !== -1"
      label="本月发货量"
      :min-width="140"
      prop="thisMonthDeliveryAmount"
      align="center"
    />

    <el-table-column
      v-if="checkListData.indexOf('thisMonthDistributeAmount') !== -1"
      label="本月配送量"
      :min-width="140"
      prop="thisMonthDistributeAmount"
      align="center"
    />

    <el-table-column
      v-if="checkListData.indexOf('currentStock') !== -1"
      label="当前库存"
      fixed="right"
      sortable="custom"
      :min-width="140"
      prop="currentStock"
      align="center"
    />

    <el-table-column
      v-if="checkListData.indexOf('capacity') !== -1"
      label="允许最大库存上限"
      :min-width="180"
      fixed="right"
      prop="capacity"
      align="center"
    >
      <template #default="{row}">
        <span v-if="row.capacity === 0">不限额</span>
        <span v-else> {{ row.capacity }}</span>
      </template>
    </el-table-column>

  </table-view>
  <Pagination
    v-model:page="queryParams.page"
    v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />
</template>

<script>
import {getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'
import {crmStore} from '@CRM/store'

export default {
  name: 'Index',
  setup() {
    const api = inject('api')
    const router = useRouter()
    // 搜索对象
    var data = reactive({
      queryParams: {
        creditType: 'distribute',
        customerName: '',
        productName: '',
        pageSize: 20,
        page: 1
      },
      tableData: [],
      total: 0,
      terminalTypeData: crmStore.getters['dictionary/getDictionary']['terminal_status'],
      tableOption: [
        { key: 'qudao', value: '渠道客户名称' },
        { key: 'kehu', value: '客户类型' },
        { key: 'productPopularName', value: '产品名称' },
        { key: 'approvalNumber', value: '批准文号' },
        { key: 'packSpecs', value: '包装规格' },
        { key: 'stock', value: '上月结余库存' },
        { key: 'thisMonthDeliveryAmount', value: '本月发货量' },
        { key: 'thisMonthDistributeAmount', value: '本月配送量' },
        { key: 'currentStock', value: '当前库存' },
        { key: 'capacity', value: '允许最大库存上限' },
      ],
      checkListData: [
        'qudao', 'kehu', 'productPopularName', 'approvalNumber',
        'packSpecs', 'stock', 'thisMonthDeliveryAmount',
        'thisMonthDistributeAmount', 'currentStock', 'capacity'
      ]
    })

    const checkList = (checked) => {
      data.checkListData = checked
    }
    const currentInstance = getCurrentInstance()

    // 获取列表
    const handlList = () => {
      api.stockSellStorage.STOCKSELLSTORAGE_LIST(data.queryParams).then(res => {
        if (res.code === 0) {
          data.tableData = res.data.list || []
          data.total = res.data.total
        }
      })
    }

    const handlChange = (val) => {
      data.queryParams.creditType = val
      data.queryParams.page = 1
      handlList()
    }

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 重置
    const handlReset = () => {
      data.queryParams = {
        creditType: 'distribute',
        customerName: '',
        productName: '',
        pageSize: 20,
        page: 1
      }
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作') return
      const a = JSON.stringify(row)
      router.push({
        path: '/inventory/distributorInventory/details',
        query: { id: row.distributeInfoDetail.id, ids: row.productInfoDetail.id, row: a }
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === '当前库存') {
          switch (row.order) {
            case 'ascending':
              data.queryParams.deliveryTimeSort = 'asc'
              break
            case 'descending':
              data.queryParams.deliveryTimeSort = 'desc'
              break
          }
        }
      }
      handlList()
    }

    onMounted(_ => {
      handlList()
    })

    return {
      ...toRefs(data),
      handlList,
      handlChange,
      handlSearch,
      handlReset,
      aloneClick,
      cellStyle,
      checkList,
      handlSort
    }
  }
}
</script>

<style scoped>

</style>
